<template>
  <div class="image">
    <div class="image-box">
      <div class="block">
        <el-avatar :size="200" :src="userInfos.avater" />
      </div>
      <div>当前头像</div>
    </div>
    <div class="image-update">
      <el-upload
        class="avatar-uploader"
        action=""
        :show-file-list="false"
        :http-request="handleRequest"
      >
        <!-- :before-upload="beforeAvatarUpload" -->
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="icon"><Plus /></el-icon>
      </el-upload>
      <div>本地上传</div>
    </div>
  </div>
  <div class="btn">
    <el-button type="primary" @click="updataImg">更新</el-button>
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, ref, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

const { proxy }: any = getCurrentInstance();
//渲染页面的url
const imageUrl = ref("");
//用于存储数据库的url
const saveUrl = ref("");
const userInfos = ref<any>({});
const tabbarShow = ref(false);
onMounted(() => {
  userInfos.value = JSON.parse(
    window.sessionStorage.getItem("Infos") || "null"
  );
});

// 更新后 获取新信息
function getUpdateInfos() {
  userInfos.value = JSON.parse(
    window.sessionStorage.getItem("Infos") || "null"
  );
}
// 更新评论区对应的姓名头像
function updateDisInfo() {
  proxy.$http.post("/discuss/updateAll/" + userInfos.value.id, {
    avater: saveUrl.value,
  });
}

//获取本地图片
const handleRequest = (e: any) => {
  const fd = new FileReader();
  fd.readAsDataURL(e.file);
  imageUrl.value = URL.createObjectURL(e.file);
  //https://img2.baidu.com/it/
  saveUrl.value = "https://img2.baidu.com/it/" + e.file.name.slice(0, -5);
};

// const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
//   if (rawFile.type !== "image/jpeg/webp") {
//     ElMessage.error("Avatar picture must be JPG format!");
//     return false;
//   } else if (rawFile.size / 1024 / 1024 > 2) {
//     ElMessage.error("Avatar picture size can not exceed 2MB!");
//     return false;
//   }
//   return true;
// };

const updataImg = () => {
  if (!imageUrl.value) return ElMessage.error("请选择要更换的照片");
  proxy.$http
    .post("/user/upinfos/" + userInfos.value.id, {
      avater: saveUrl.value,
    })
    .then((res: any) => {
      ElMessageBox.alert("头像修改成功", {
        confirmButtonText: "OK",
        callback: async () => {
          imageUrl.value = "";
          window.location.reload();
          await getUpdateInfos();
          await updateDisInfo();
        },
      });
      window.sessionStorage.setItem("Infos", JSON.stringify(res.data));
    });
};
</script>

<style scoped lang="less">
.image {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  &-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid rgb(140, 135, 135);
  }
  &-update {
    display: flex;
    flex-direction: column;
    align-items: center;
    .avatar-uploader {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px dashed #e3e3ee;
      .avatar {
        width: 200px;
        height: 200px;
        border-radius: 50%;
      }
      .icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
      }
    }
  }
}
.btn {
  text-align: center;
  margin-top: 100px;
  .el-button {
    padding: 20px 50px;
  }
}
</style>
